<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络配置 - DTU管理系统</title>
    <script src="js/toast.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <style>
        
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: auto;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>网络配置</h1>
        <div class="breadcrumb">DTU管理系统 > 网络配置</div>
    </div>

    <div class="container">
        <!-- Tab导航 -->
        <div class="nav-tabs">
            <a href="index.html" class="nav-tab">首页</a>
            <a href="network.html" class="nav-tab active">网络配置</a>
            <a href="serial.html" class="nav-tab">串口配置</a>
            <a href="collect.html" class="nav-tab">数据采集</a>
            <a href="push.html" class="nav-tab">数据推送</a>
            <a href="at-command.html" class="nav-tab">AT命令</a>
            <a href="system.html" class="nav-tab">系统设置</a>
        </div>

        <!-- 以太网配置 -->
        <div class="card">
            <div class="card-header">以太网配置</div>
            <div class="card-body">
                <form id="ethernet-form">
                    <div class="form-group">
                        <div class="checkbox-group">
                            <input type="checkbox" id="dhcp-enable" checked>
                            <label for="dhcp-enable">启用DHCP自动获取IP</label>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="ethernet-ip">IP地址</label>
                            <input type="text" id="ethernet-ip" value="192.168.1.100" disabled>
                        </div>
                        <div class="form-group">
                            <label for="ethernet-netmask">子网掩码</label>
                            <input type="text" id="ethernet-netmask" value="255.255.255.0" disabled>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="ethernet-gateway">网关</label>
                            <input type="text" id="ethernet-gateway" value="192.168.1.1" disabled>
                        </div>
                        <div class="form-group">
                            <label for="ethernet-dns1">DNS服务器</label>
                            <input type="text" id="ethernet-dns1" value="8.8.8.8" disabled>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="ethernet-dns2">备用DNS</label>
                        <input type="text" id="ethernet-dns2" value="8.8.4.4" disabled>
                    </div>
                    
                    <button type="button" class="btn btn-primary" onclick="saveEthernetConfig()">保存以太网配置</button>
                </form>
            </div>
        </div>

        <!-- WiFi配置 -->
        <div class="card" id="wifi-config" style="display: none;">
            <div class="card-header">WiFi配置</div>
            <div class="card-body">
                <form id="wifi-form">
                    <div class="form-group">
                        <label for="wifi-ssid">WiFi名称(SSID)</label>
                        <input type="text" id="wifi-ssid" placeholder="请输入WiFi名称">
                    </div>
                    
                    <div class="form-group">
                        <label for="wifi-password">WiFi密码</label>
                        <input type="password" id="wifi-password" placeholder="请输入WiFi密码">
                    </div>
                    
                    <div class="form-group">
                        <label for="wifi-security">安全类型</label>
                        <select id="wifi-security">
                            <option value="0">开放</option>
                            <option value="1">WEP</option>
                            <option value="2" selected>WPA/WPA2</option>
                            <option value="3">WPA3</option>
                        </select>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" class="btn btn-primary" onclick="saveWiFiConfig()">保存WiFi配置</button>
                        <button type="button" class="btn btn-secondary" onclick="scanWiFi()">扫描WiFi</button>
                        <button type="button" class="btn btn-success" onclick="connectWiFi()">连接WiFi</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 4G配置 -->
        <div class="card" id="lte-config" style="display: none;">
            <div class="card-header">4G/LTE配置</div>
            <div class="card-body">
                <form id="lte-form">
                    <div class="form-group">
                        <label for="lte-apn">APN接入点</label>
                        <input type="text" id="lte-apn" placeholder="例如: cmnet">
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="lte-username">用户名</label>
                            <input type="text" id="lte-username" placeholder="可选">
                        </div>
                        <div class="form-group">
                            <label for="lte-password">密码</label>
                            <input type="password" id="lte-password" placeholder="可选">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="lte-pin">PIN码</label>
                        <input type="text" id="lte-pin" placeholder="SIM卡PIN码(可选)">
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" class="btn btn-primary" onclick="saveLTEConfig()">保存4G配置</button>
                        <button type="button" class="btn btn-success" onclick="connectLTE()">连接4G网络</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadNetworkConfig();
            setupEventListeners();
        });

        // 设置事件监听器
        function setupEventListeners() {
            // DHCP开关
            document.getElementById('dhcp-enable').addEventListener('change', function() {
                const isEnabled = this.checked;
                const inputs = ['ethernet-ip', 'ethernet-netmask', 'ethernet-gateway', 'ethernet-dns1', 'ethernet-dns2'];
                inputs.forEach(id => {
                    document.getElementById(id).disabled = isEnabled;
                });
            });
        }

        // 加载网络配置
        async function loadNetworkConfig() {
            try {
                // 首先获取设备信息，确定设备型号
                const deviceResponse = await fetch('/api/system/info');
                const deviceInfo = await deviceResponse.json();
                console.log('设备信息:', deviceInfo);

                // 获取网络配置
                const response = await fetch('/api/network');
                const config = await response.json();
                console.log('网络配置:', config);

                if (config.ethernet_config) {
                    const eth = config.ethernet_config;
                    document.getElementById('dhcp-enable').checked = eth.dhcp_enable || false;
                    document.getElementById('ethernet-ip').value = eth.ip || '';
                    document.getElementById('ethernet-netmask').value = eth.netmask || '';
                    document.getElementById('ethernet-gateway').value = eth.gateway || '';
                    document.getElementById('ethernet-dns1').value = eth.dns1 || '';
                    document.getElementById('ethernet-dns2').value = eth.dns2 || '';

                    // 触发DHCP开关事件，更新输入框状态
                    const dhcpEnable = document.getElementById('dhcp-enable');
                    const isEnabled = dhcpEnable.checked;
                    const inputs = ['ethernet-ip', 'ethernet-netmask', 'ethernet-gateway', 'ethernet-dns1', 'ethernet-dns2'];
                    inputs.forEach(id => {
                        document.getElementById(id).disabled = isEnabled;
                    });
                }

                // 根据设备型号显示对应的网络配置
                let deviceModel = deviceInfo.device_model;

                console.log('设备型号:', deviceModel);

                // 显示对应的网络配置选项
                if (deviceModel === 1) { // WiFi版本
                    document.getElementById('wifi-config').style.display = 'block';

                    // 如果有WiFi配置，填充表单
                    if (config.wifi_config) {
                        const wifi = config.wifi_config;
                        document.getElementById('wifi-ssid').value = wifi.ssid || '';
                        document.getElementById('wifi-password').value = wifi.password || '';
                        document.getElementById('wifi-security').value = wifi.security || 2;
                    }
                } else if (deviceModel === 2) { // 4G版本
                    document.getElementById('lte-config').style.display = 'block';

                    // 如果有4G配置，填充表单
                    if (config.lte_config) {
                        const lte = config.lte_config;
                        document.getElementById('lte-apn').value = lte.apn || '';
                        document.getElementById('lte-username').value = lte.username || '';
                        document.getElementById('lte-password').value = lte.password || '';
                        document.getElementById('lte-pin').value = lte.pin || '';
                    }
                }

                showMessage('网络配置加载成功', 'success');
            } catch (error) {
                console.error('加载网络配置失败:', error);
                showMessage('加载网络配置失败: ' + error.message, 'error');
            }
        }

        // 保存以太网配置
        async function saveEthernetConfig() {
            try {
                const config = {
                    dhcp_enable: document.getElementById('dhcp-enable').checked,
                    ip: document.getElementById('ethernet-ip').value,
                    netmask: document.getElementById('ethernet-netmask').value,
                    gateway: document.getElementById('ethernet-gateway').value,
                    dns1: document.getElementById('ethernet-dns1').value,
                    dns2: document.getElementById('ethernet-dns2').value
                };

                const response = await fetch('/api/network', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ ethernet_config: config })
                });

                const result = await response.json();
                if (result.result === 'success') {
                    showMessage('以太网配置保存成功', 'success');
                } else {
                    showMessage('以太网配置保存失败: ' + (result.message || '未知错误'), 'error');
                }
            } catch (error) {
                showMessage('以太网配置保存失败: ' + error.message, 'error');
            }
        }

        // 保存WiFi配置
        async function saveWiFiConfig() {
            try {
                const config = {
                    ssid: document.getElementById('wifi-ssid').value,
                    password: document.getElementById('wifi-password').value,
                    security: parseInt(document.getElementById('wifi-security').value)
                };

                const response = await fetch('/api/network', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ wifi_config: config })
                });

                const result = await response.json();
                if (result.result === 'success') {
                    showMessage('WiFi配置保存成功', 'success');
                } else {
                    showMessage('WiFi配置保存失败: ' + (result.message || '未知错误'), 'error');
                }
            } catch (error) {
                showMessage('WiFi配置保存失败: ' + error.message, 'error');
            }
        }

        // 保存4G配置
        async function saveLTEConfig() {
            try {
                const config = {
                    apn: document.getElementById('lte-apn').value,
                    username: document.getElementById('lte-username').value,
                    password: document.getElementById('lte-password').value,
                    pin: document.getElementById('lte-pin').value
                };

                const response = await fetch('/api/network', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ lte_config: config })
                });

                const result = await response.json();
                if (result.result === 'success') {
                    showMessage('4G配置保存成功', 'success');
                } else {
                    showMessage('4G配置保存失败: ' + (result.message || '未知错误'), 'error');
                }
            } catch (error) {
                showMessage('4G配置保存失败: ' + error.message, 'error');
            }
        }

        // 扫描WiFi
        async function scanWiFi() {
            showMessage('正在扫描WiFi网络...', 'info');
            // 这里应该调用WiFi扫描API
        }

        // 连接WiFi
        async function connectWiFi() {
            showMessage('正在连接WiFi...', 'info');
            // 这里应该调用WiFi连接API
        }

        // 连接4G网络
        async function connectLTE() {
            showMessage('正在连接4G网络...', 'info');
            // 这里应该调用4G连接API
        }
    </script>
</body>
</html>
